<template>
    <div class="app-container">
        <roleFrom ref="roleFromRef" @fromQuery="fromQuery" @reset="reFresh">
        </roleFrom>

        <sysQueryutils
            @toolClick="toolClick"
            :btnList="btnList"
            @reFresh="reFresh"
            :loading="loading"
        ></sysQueryutils>

        <roleTable
            v-model:loading="loading"
            :tableData="tableData"
            @reFresh="reFresh(false)"
            @handleUserOpenDialog="handleUserOpenDialog"
        ></roleTable>

        <template v-if="pageInfo.total > 0">
            <div>
                <pagination
                    v-model:total="pageInfo.total"
                    v-model:page="pageInfo.page"
                    v-model:limit="pageInfo.limit"
                    @pagination="searchPagination"
                    class="pagination"
                />
            </div>
        </template>

        <viewRoleDialog
            v-model="dialogViewRoleVisible"
            :viewRoleRes="viewRoleRes"
        ></viewRoleDialog>

        <!-- 编辑和添加是一个 -->
        <addRoleDialog
            v-model="dialogRoleUserVisible"
            :roleDialogType="roleDialogType"
            :roleId="roleId"
            @reFresh="reFresh(false)"
        ></addRoleDialog>
    </div>
</template>

<script setup lang="ts">
import { btnList } from "@/views/system/roleManager";
import RoleAPI from "@/api/system/role";

const roleFromRef = ref();
const loading = ref(false);

const roleDialogType: any = ref("添加");
const roleId: any = ref("");

/**
 *  添加 查看 编辑 导入数据 弹窗
 */
const dialogRoleUserVisible = ref(false);
const dialogViewRoleVisible = ref(false);

// 查询参数
let pageInfo = {
    page: 1,
    limit: 10,
    total: 0,
};

// 表格数据
let tableData = ref([] as any);

// 分页查询表单
async function searchPagination(value: any) {
    roleFromRef.value.querTableList();
}

// reFresh
async function reFresh(isReFresh: boolean = true) {
    if (isReFresh) {
        pageInfo.page = 1;
        pageInfo.limit = 10;
    }
    roleFromRef.value.querTableList();
}

// 查询表单
async function fromQuery(formObj: any) {
    let params = {
        ...formObj,
        page: pageInfo.page,
        limit: pageInfo.limit,
    };
    loading.value = true;
    await RoleAPI.getList(params)
        .then((res: any) => {
            tableData.value = res.data;
            pageInfo.page = res.current_page;
            pageInfo.total = res.total;
            pageInfo.limit = res.per_page;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

// 工具列表点击
async function toolClick(item: any) {
    switch (item.name) {
        case "添加角色":
            roleDialogType.value = "添加";
            dialogRoleUserVisible.value = true;
            break;
        default:
            break;
    }
}

// table操作弹窗
function handleUserOpenDialog(rowInfo: any) {
    if (rowInfo.type === "查看") {
        viewUser(rowInfo.item.row.id);
    }
    if (rowInfo.type === "编辑") {
        roleId.value = rowInfo.item.row.id;
        roleDialogType.value = "编辑";
        dialogRoleUserVisible.value = true;
    }
}

let viewRoleRes = ref([] as any);

// 查看角色
async function viewUser(id: string) {
    loading.value = true;
    await RoleAPI.viewRoleInfo({ id })
        .then((res: any) => {
            viewRoleRes.value = res;
            dialogViewRoleVisible.value = true;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

// onBeforeMount(() => {
//     searcManagerList();
// });
onMounted(() => {});
</script>

<style lang="scss" scoped>
.common_sty {
    padding: 0px 33px 27px 33px;
    background: #ecf0fe;
}
.app-container {
    @extend .common_sty;
    /* 57px = navbar = 57px */
    height: calc(100vh - 57px);
    overflow-y: scroll;
}

/** 开启tag标签  */
.hasTagsView {
    .app-container {
        @extend .common_sty;
        /* 84px = navbar + tags-view = 83px + 73px */
        height: calc(100vh - 141px);
        overflow-y: scroll;
        padding: 0px 33px 23px 33px;
    }
}
</style>
